import React, { useEffect, useState, useRef } from "react";
import { Input, Layout, Button, Radio, Skeleton, Switch, Card, Avatar, Tree, Table, Space } from 'antd';
import { request } from 'dw-mx-request';
import { useHistory, useLocation } from 'dw-mx-router';
import './style/dataSource.css';
import 'json-schema-editor-visual/dist/main.css';
import './style/antdv391.css';
import schemaEditor from "json-schema-editor-visual/dist/main.js";


export default function DataSourceConfigPara(props) {

    const { Sider } = Layout;
    const { Search } = Input;
    const option = {};
    const history = useHistory();
    const [inpara, setInpara] = useState('');
    const [outpara, setOutpara] = useState('');
    const SchemaEditor = schemaEditor(option);

    useEffect(() => {
    }, []);

    const inparaData = {
        "type": "object",
        "title": "title",
        "properties": {
            "field_5": {
                "type": "string",
                "title": "入参"
            }
        },
        "required": [
            "field_5"
        ]
    };
    const outparaData = {
        "type": "object",
        "title": "title",
        "properties": {
            "field_5": {
                "type": "string",
                "title": "出参"
            }
        },
        "required": [
            "field_5"
        ]
    };

    //改变入参
    const inparaChange = (val) => {
        setInpara(val);
    };

    //改变出参
    const outparaChange = (val) => {
        setOutpara(val);
    };

    //保存入参
    const saveInpara = () => {

    };

    //保存出参
    const saveOutpara = () => {

    };

    return (
        <>
            <div className={'dlc-dsConfig-para-top'}>
                <div className={'dlc-dsConfig-para-title'}>入参</div>
                <Button type={'primary'} className={'dlc-dsConfig-para-btn'}>入参保存</Button>
            </div>
            <SchemaEditor showEditor={true} data={JSON.stringify(inparaData)} onChange={(e)=>inparaChange(e)}/>

            <div className={'dlc-dsConfig-para-top'}>
                <div className={'dlc-dsConfig-para-title'}>出参</div>
                <Button type={'primary'} className={'dlc-dsConfig-para-btn'}>出参保存</Button>
            </div>
            <SchemaEditor showEditor={true} data={JSON.stringify(outparaData)} onChange={(e)=>outparaChange(e)}/>
        </>
    );
}